<template>
  <div class="halfFoldPage">
    <div class="ruleInfo" @click="isRule">
      活动规则
    </div>
    <div class="ruleInfo2" @click="gotoPay">
      我的礼品
    </div>
    <div class="goodsBody" v-if="goodslist.length > 0">
      <div class="seckillInfoList" v-for="(item,index) in goodslist" :key="index">
        <img class="seckillInfoImg" :src="item.url" />
        <div class="seckillInfoView">
          <div class="seckillInfoTitle">{{item.goodsName}}</div>
          <div class="seckillInfoPrice">
            <div class="seckillInfoPriceView">
              <div class="seckillInfoPriceNum">实付<text class="seckillInfoPriceNumText">￥</text>{{item.goodsPrice}}</div>
              <div class="seckillInfoPriceOriginal">￥{{item.goodsMarketPrice}}</div>
            </div>
            <div class="seckillInfoButton" @click="submit(item.goodsId)" v-if="item.status==true">马上抢</div>
            <div class="seckillInfoButton seckillInfoButtonCcolor" v-else>马上抢</div>
            </div>
          </div>
        </div>
      </div>
      <van-empty v-else class="custom-image" image="https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20220626/3ae23dd1e14447db960a79c1e8588c54.png" description="暂无数据" />
      <!-- 绑定手机号组件 -->
      <!-- <bindPhone title="绑定手机号" isShow="{{isShow}}" bind:close="onClose"></bindPhone> -->
      <activityRule :show="ruleShow" :title="mallActivityEntity.strategy" @isRule="isRule"></activityRule>
      <changePhone :show="updatePhoneShow" @phoneCancel="phoneCancel" titles="绑定手机号"></changePhone>
    </div>
</template>

<script>
  import {
    activityInfo,
    activityVerify,
    shopping,
    additionalRule
  } from '@/api/raffle.js'
  import {postPrepay} from '@/api/home'
  import {
    Dialog,
    Popup,
    Toast
  } from 'vant'
  import changePhone from '@/components/changePhone'
  import activityRule from '@/components/activityRule'
  export default {
    components:{
      changePhone,
      activityRule
    },
    data() {
      return {
        goodslist:[],
        activityCode:'XSQGSP',
        mallActivityEntity:{},
        updatePhoneShow:false,
        ruleShow:false
      }
    },
    mounted() {
      this.activityInfo()
    },
    methods: {
      // 获取活动信息
        activityInfo(){
          let data = {
            activityCode:this.activityCode
          }
          activityInfo(data).then(res=>{
            this.mallActivityEntity=res.data.mallActivityEntity,
            this.goodslist=res.data.goodslist
            this.activityVerify(res.data.mallActivityEntity.whitelistConfine)
          })
        },
         // 活动资格验证
         activityVerify(type){
          let that = this
          let data = {
            id:this.mallActivityEntity.id
          }
          activityVerify(data).then(res=>{
            if(res.code==0){
              let goodslist = this.goodslist
              if(type==1){
                goodslist.forEach(item=>{
                  if(item.whitelistGrade.indexOf(res.data.level)==-1){
                    item.status = false
                  }else{
                    item.status = true
                  }
                })
              }else{
                goodslist.forEach(item=>{
                    item.status = true
                })
              }
              this.goodslist=goodslist
              this.$forceUpdate()
            }else if(res.code==7){
              this.tipsMessage(res.msg)
              this.updatePhoneShow=true
            }else if(res.code==10){
              this.tipsMessage(res.msg)
            }else if(res.code==11){
              Dialog.confirm({
                title: '提示',
                message: res.msg,
              }).then(() => {
                that.$router.push({
                  path:'/order',
                  query:{type:-2}
                })
              })
              .catch(() => {
              });
            }else{
              this.tipsMessage(res.msg)
            }
          }).catch(res=>{
            if(res.code==7){
              this.tipsMessage(res.msg)
              this.updatePhoneShow=true
            }else if(res.code==10){
              this.tipsMessage(res.msg)
            }else if(res.code==11){
              Dialog.confirm({
                title: '提示',
                message: res.msg,
              }).then(() => {
                that.$router.push({
                  path:'/order',
                  query:{type:-2}
                })
              })
              .catch(() => {
              });
            }else{
              this.tipsMessage(res.msg)
            }

          })
        },
        // 抢购
        submit(e){
          console.log(e)
          let data = {
            goodsId:e,
            activityId:this.mallActivityEntity.id,
            number:1,
          }
          console.log(data)
          shopping(data).then(res=>{
            if(res.code==0){
              this.payTap(res.data.orderId)
            }else if(res.code==7){
              this.tipsMessage(res.msg)
              this.updatePhoneShow=true
            }else if(res.code==10){
              this.tipsMessage(res.msg)
            }else if(res.code==11){
              Dialog.confirm({
                title: '提示',
                message: res.msg,
              }).then(() => {
                that.$router.push({
                  path:'/order',
                  query:{type:-2}
                })
              })
              .catch(() => {
              });
            }else{
              this.tipsMessage(res.msg)
            }
          }).catch(res=>{
            if(res.code==7){
              this.tipsMessage(res.msg)
              this.updatePhoneShow=true
            }else if(res.code==10){
              this.tipsMessage(res.msg)
            }else if(res.code==11){
              Dialog.confirm({
                title: '提示',
                message: res.msg,
              }).then(() => {
                that.$router.push({
                  path:'/order',
                  query:{type:-2}
                })
              })
              .catch(() => {
              });
            }else{
              this.tipsMessage(res.msg)
            }
          })
        },
        payTap(id) {
          let payMap = {
            orderId: id,
            tradeType: 'JSAPI'
          }
          postPrepay(payMap).then(res => {
            if (res.msg === 'success') {
              if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
                  document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
                }
              } else {
                this.onBridgeReady(res.data)
              }
            }
          }).catch(res => {
            this.tipsMessage(res.msg)
          })
        },
        onBridgeReady(data) {
          const that = this
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            {
              appId: data.appId, // 公众号名称，由商户传入
              timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
              nonceStr: data.nonceStr, // 随机串
              package: data.packageValue, // 微信订单id
              signType: 'MD5', // 微信签名方式：
              paySign: data.paySign // 微信签名
            },
            function(res) {
              console.log(res)
              if (res.err_msg === 'get_brand_wcpay_request:ok') {
                // 付款成功
                that.tipsMessage('购买成功,请到我的订单查看')
              } else {
                that.tipsMessage('未完成支付...')
              }
            }
          )
        },
        // 我的礼品
        gotoPay(){
          this.$router.push({
            path:'/order',
            query:{type:-2}
          })
        },
         // 查看活动规则
         isRule(){
            this.ruleShow=!this.ruleShow
        },
        //提示信息
        tipsMessage(text) {
          Dialog.alert({
            message: text,
          }).then(() => {
          });
        },
        phoneCancel(){
          this.updatePhoneShow = false,
          this.activityInfo()
        }
    }
  }
</script>

<style lang="less" scoped>
  .halfFoldPage {
    width: 100vw;
    min-height: 100vh;
    background-color: rgb(249, 249, 249);
    padding-bottom: 25px;
    box-sizing: border-box;
  }
  .van-dropdown-menu {
    background-color: initial !important;
    box-shadow: initial !important;
  }
  .goodsBody{
    overflow: hidden;
  }

  .seckillInfoList {
    margin: 15px auto 0;
    padding: 15px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
  }

  .seckillInfoImg {
    width: 86px;
    height: 86px;
  }

  .seckillInfoView {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
  }

  .seckillInfoTitle {
    font-size: 14px;
    width: 214px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 24px;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .seckillInfoStock {
    display: flex;
    align-items: center;
    margin-top: 7px;
  }

  .seckillInfoProcess {
    width: 130x;
  }

  .seckillInfoStockText {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 17px;
    color: #FA392F;
    margin-left: 6px;
  }

  .seckillInfoPrice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
  }

  .seckillInfoPriceView {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .seckillInfoPriceNum {
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 26px;
    color: #FA392F;
  }

  .seckillInfoPriceNumText {
    font-size: 12px;
    margin-left: 3px;
  }

  .seckillInfoPriceOriginal {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #CBC9DC;
    text-decoration: line-through;
  }

  .seckillInfoButton {
    width: 57px;
    height: 20px;
    background: rgba(250, 57, 47, 1);
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 20px;
    color: #FFFFFF;
    margin-right: 25px;
  }

  .seckillInfoButtonCcolor {
    background: #999;
  }

  .priceView {
    display: flex;
    align-items: center;
  }

  .prieExplain {
    font-size: 12px;
    background: #FF873D;
    color: #fff;
    padding: 1px 3px;
    margin-top: 3px;
  }

  .ruleInfo {
    position: fixed;
    top: 65px;
    right: 0;
    width: 18px;
    height: 70px;
    background: url('https://lybank-1302786294.cos.ap-guangzhou.myqcloud.com/shops/images/20230403/c82920222393464b91fa12422726d2cd.png') no-repeat;
    background-size: 100% 100%;
    color: #FFE1CE;
    font-size: 12px;
    line-height: 17.5px;
    text-align: center;
    font-weight: 400;
  }
  .ruleInfo2 {
    position: fixed;
    top: 165px;
    right: 0;
    width: 18px;
    height: 70px;
    background: url('https://lybank-1302786294.cos.ap-guangzhou.myqcloud.com/shops/images/20230403/c82920222393464b91fa12422726d2cd.png') no-repeat;
    background-size: 100% 100%;
    color: #FFE1CE;
    font-size: 12px;
    line-height: 17.5px;
    text-align: center;
    font-weight: 400;
  }
  .custom-image{
    margin: 50% auto 0;
  }



</style>
